<template>
  <div class="vue-keyboard-cn-aware-scroll-view" ref="scrollView">
    <slot />
    <div :style="{ height: height + 'px' }"></div>
  </div>
</template>
<script>
import { getActiveKeyBoard, getActiveInput } from "@devass/js/blur.js";
import EventKeys from "@enu/eventKeys.js";
import {
  getDomToVisbleDis,
  getDomToViewVisbleDis,
  getBlockHeight,
} from "in-view-utils";

export default {
  props: {
    behavior: {
      validator: function (value) {
        return [undefined, "dom", "body"].indexOf(value) !== -1;
      },
      default: () => "body",
    },
    rotate: {
      validator: function (value) {
        return [0, 90, -90].indexOf(value) > -1;
      },
      default: () => 0,
    },
  },
  data() {
    return {
      show: false,
      keyBoardHeight: 0,
      fixedInputHeight: 0,
    };
  },
  computed: {
    height() {
      return this.keyBoardHeight + this.fixedInputHeight;
    },
  },
  watch: {
    height: {
      handler(newV) {
        this.$nextTick(() => {
          var input = getActiveInput().dom;
          input && this.wrapScroll(input);
          console.log("watch 滚动", newV);
        });
      },
      immediate: true,
    },
  },
  created() {
    this.$root.$on(
      EventKeys["vue-keyboard-cn-showed"],
      this.keyboardShowHandler
    );
  },
  beforeDestroy() {
    this.$root.$off(
      EventKeys["vue-keyboard-cn-showed"],
      this.keyboardShowHandler
    );
  },
  methods: {
    keyboardShowHandler(obj) {
      console.log("keyBoardScroll ", obj.show);
      this.show = obj.show;
      this.checkKeyBoardIsShowed();
    },
    checkKeyBoardIsShowed() {
      this.$nextTick(() => {
        this.setKeyBoardHeight();
      });
    },
    /**
     * 返回已显示的虚拟键盘
     * @return dom or false
     */
    getKeyBoard() {
      let keyBoardBox = getActiveKeyBoard().dom;
      console.log("keyBoardBox", keyBoardBox, getActiveKeyBoard);
      if (keyBoardBox) {
        return keyBoardBox;
      }
      return null;
    },
    getActiveKeyInput() {
      return getActiveInput().dom;
    },
    getActiveKeyFixedInput() {
      return getActiveInput().fixedInput;
    },
    getBodyScrollTop() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      return scrollTop;
    },
    setKeyBoardHeight() {
      //这里需要考虑键盘已经消失的场景
      let keyBoardDom = this.getKeyBoard();
      if (!keyBoardDom) {
        this.keyBoardHeight = 0;
      }
      if (this.show && keyBoardDom) {
        this.keyBoardHeight = getBlockHeight(keyBoardDom);
      } else {
        this.keyBoardHeight = 0;
      }
      this.fixedInputHeight = this.getFixedInputHeight();
    },
    getFixedInputHeight() {
      //获取固定键盘底部的高度
      let fixedInput = this.getActiveKeyFixedInput();
      let fixedInputHeight = 0;
      if (
        fixedInput &&
        fixedInput instanceof Element &&
        fixedInput.style.display != "none"
      ) {
        fixedInputHeight = getBlockHeight(fixedInput);
      }
      console.log("fixedInputHeight", fixedInputHeight);
      return fixedInputHeight;
    },
    //容器滚动
    wrapScroll() {
      //滚动容器是窗口
      if (!this.behavior || this.behavior === "body") {
        console.log("getActiveKeyFixedInput", this.getActiveKeyFixedInput());
        //需要等填充div渲染完后在计算
        this.$nextTick(() => {
          let disObj = getDomToViewVisbleDis({
            dom: this.getActiveKeyInput(),
            yOtherHeight: this.height,
          });
          console.log("body scroll", disObj);
          window.scrollBy(disObj.x, disObj.y);
        });
      } else {
        let viewPort = this.$refs["scrollView"];
        //滚动的是当前dom
        this.$nextTick(() => {
          let disObj = getDomToVisbleDis({
            dom: this.getActiveKeyInput(),
            viewPort,
            yOtherHeight: this.height,
            rotate: this.rotate,
          });
          console.log("dom 滚动disObj", disObj);
          viewPort.scrollBy(disObj.x, disObj.y);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.vue-keyboard-cn-aware-scroll-view {
  overflow-y: auto;
}
</style>